<template>
  <li class="audio-item" @click="togglePlay(item)">

    <div v-bind:class="[isPlaying ? 'audio-playing' : 'audio-ready', 'audio-item-left']">
    </div>

    <div class="audio-item-right">
      <div class="audio-item-right-main">
        <div v-bind:class="['audio-item-title', isPlaying ? 'item-title-active' : '']">{{item.name}}</div>
        <div class="audio-item-status" v-bind:class="statusClass">{{listenStatus}}</div>
      </div>
      <div class="audio-item-right-more">
        <div class="audio-item-addtime">{{item.createTime | timeAgo}}</div>
        <div class="audio-item-duration">{{item.duration | timeDuration}}</div>
      </div>
    </div>

  </li>
</template>

<script>

export default {
  name: 'sq-audio-item',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      //isplaying: false,
      //itemStatus: "试听"
    }
  },
  computed: {
    isPlaying: function(){
      var playingAudioItem = this.$store.getters.playingAudioItem;
      var isPlaying = this.$store.getters.isPlaying;
      if(playingAudioItem){
        return playingAudioItem.id == this.item.id && isPlaying;
      }
      return false;
    },
    listenStatus: function() {
      if(this.item.hasBuy){
          if(this.item.hasListen){
            return "已听";
          }else{
            return "未听";
          }
      }else{
          if(this.item.free){
            return "试听";
          }else{
            return "";
          }
      }
    },
    statusClass: function() {
      return {
        'buy-and-learned': this.item.hasBuy && this.item.hasListen,
        'buy-and-notlearn': this.item.hasBuy && !this.item.hasListen,
        'notbuy-or-notlogin-free': !this.item.hasBuy && this.item.free
      }
    }
  },
  methods: {
    togglePlay(item) {
      // 判断是否免费
      console.log("togglePlay audioId:" + item.id);
      if(item.free || item.hasBuy){
        this.$emit("togglePlay");
        return;
      } else {
        var islogin = this.$store.getters.islogin;
        if(!islogin) {
          //this.$store.dispatch("toggleLoginBox");
          this.$store.dispatch("toggleBuyConfirmBox");
          return;
        }
        if(!item.hasBuy){
          this.$emit("buyCourse");
        }
      }
    }
  }
}
</script>

<!-- custom mint-ui -->
<style scoped>

  .audio-item {
     width:100%;
     display:flex;
     border-bottom:1px solid #eee;
  }

  .audio-item .audio-item-left {
    width: 60px;
    height:60px;
    flex-basis: 60px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
    flex: 0 0 auto;
  }
  .audio-playing {
    background-image: url("../assets/btnplaying.png")
  }

  .audio-ready {
    background-image: url("../assets/btnready.png")
  }
  .audio-item .audio-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    padding-right:10px;
    width:100%;
    min-width: 0px;
  }

  .audio-item-right-main {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 10px;
  }

  .audio-item-title {
    font-size: 14px;
    color: #000000;
  }

  .item-title-active {
    color: #3385ff;
  }

  .audio-item-status {
    color: green;
    flex-basis: 60px;
    text-align: right;
    font-size: 12px;
  }

  .buy-and-learned {
    color: #999999;
  }

  .buy-and-notlearn {
    color: #5ba5fc;
  }

  .notbuy-or-notlogin-free {
    color: #5ba5fc;
  }
  .audio-item-right-more {
    display: flex;
    flex-wrap: nowrap;
    font-size: 12px;
    color: #999999;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 4px;
  }
</style>

